<template>
  <div class="purchasing-user">
    <!-- 采买用户查询表单-->
    <div class="search">
      <div class="title">采买用户列表</div>
      <el-form :inline="true" :model="searchForm" label-width="110px" class="demo-form-inline" size="mini"
               ref="search">
<!--        <el-form-item label='用户id' prop="ber_id">-->
<!--          <el-input v-model="searchForm.ber_id"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label='登录名' prop="ber_uname">
          <el-input v-model="searchForm.ber_uname"></el-input>
        </el-form-item>
        <el-form-item label='姓名' prop="ber_name">
          <el-input v-model="searchForm.ber_name"></el-input>
        </el-form-item>
        <el-form-item label='手机号码' prop="ber_phone">
          <el-input v-model="searchForm.ber_phone"></el-input>
        </el-form-item>
<!--        <el-form-item label="账号状态" prop="ber_status">-->
<!--          <el-select v-model="searchForm.ber_status" >-->
<!--            <el-option label="全部" value=""></el-option>-->
<!--            <el-option label="正常" :value="1"></el-option>-->
<!--            <el-option label="冻结" :value="0"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm('search')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--    导出功能-->
    <el-row>
      <el-col>
        <el-button type="primary" @click="exportExcel" size="mini">导出</el-button>
      </el-col>
    </el-row>

    <!--   采买用户列表-->
    <el-table
      :data="showTableData"
      stripe
      style="width: 100%"
      size="mini"
      id="userTable">
      <el-table-column
        type="index"
        width="50"
        label="#">
      </el-table-column>
      <el-table-column
        prop="ber_id"
        label="用户id">
      </el-table-column>
      <el-table-column
        prop="ber_uname"
        label="用户登录名">
      </el-table-column>
      <el-table-column
        prop="ber_name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="ber_sex"
        label="性别">
        <template slot-scope="scope">
          <span v-if="scope.row.ber_sex == 0">保密</span>
          <span v-if="scope.row.ber_sex == 1">男</span>
          <span v-if="scope.row.ber_sex == 2">女</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="ber_idnum"
        label="身份证号码">
      </el-table-column>
      <el-table-column
        prop="ber_phone"
        label="电话号码">
      </el-table-column>
      <el-table-column
        prop="ber_email"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="ber_address"
        label="住址"
        width="150">
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="ber_status"-->
<!--        label="账号状态">-->
<!--        <template slot-scope="scope">-->
<!--          <el-tag type="success" v-if="scope.row.ber_status==1">正常</el-tag>-->
<!--          <el-tag type="info" v-else>冻结</el-tag>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="操作" width="170px">
        <template slot-scope="scope">
<!--          <el-button type="primary" size="mini" @click="toggleState(scope.row)">{{scope.row.ber_status==1 ? "冻结" : "解冻"}}</el-button>-->
          <el-button type="primary" size="mini" @click="resetSecret(scope.row)">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--      分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import {getBuyerByKey,resetBuyerPassword} from "@/network/business/purchasingUser";
import {resetAdPassword} from "@/network/system/administrator";
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import {formatDate} from "@/common/utils";
export default {
  name: "PurchasingUser",
  created(){
    this.getUsersFromServe();
  },
  data(){
    return {
      pageSizeTemp:0,  //页面大小的副本
      currentPageTemp:0,  //当前页面的副本
      currentPage: 1,  //当前页面
      pageSize:5,  //页面条数，默认为10条
      searchForm:{
        // ber_id:'', //账号id
        ber_uname:'',  //用户登录名
        ber_name:'', //真实名
        ber_phone:'',   //手机号码
        // ber_status:'', //状态
      },
      tableData:[],
      showTableData:[]
    }
  },
  computed:{
    total(){ //总条数
      return this.tableData.length;
    }
  },
  methods:{
    //从服务器获取采用用户
    getUsersFromServe(){
      this.currentPage=1;
      getBuyerByKey(this.searchForm).then(res=>{
        this.tableData = res.data;
        this.getTableData();
      })
    },
    //显示所有数据
    showAllData(){
      this.pageSizeTemp = this.pageSize;
      this.currentPageTemp = this.currentPage;
      this.pageSize = this.tableData.length;
      this.currentPage = 1;
      this.getTableData();
    },
    //还原当前数据
    resetData(){
      this.currentPage = this.currentPageTemp;
      this.pageSize = this.pageSizeTemp;
      this.getTableData();
    },
    //导出excel
    exportExcel(){
      this.showAllData();
      this.$nextTick(function(){
        //关联节点
        let wb = XLSX.utils.table_to_book(document.querySelector("#userTable"));
        let wbOut = XLSX.write(wb,{bookType:'xlsx', bookSST:true, type:'array'});
        try{
          let time = formatDate(new Date(), "yyyy-MM-dd");
          FileSaver.saveAs(new Blob([wbOut],{type:'application/octet-stream'}),`${time}-采买用户信息.xlsx`);
        }catch (e){
          if(typeof console !== 'undefined'){
            console.log(e,wbOut);
          }
        }
        //表格还原
        this.resetData();
        return wbOut;
      })
    },
    //重置密码
    resetSecret(user){
      this.$confirm(`确认重置${user.ber_uname}用户的密码吗？`,'提示',{
        confirmButtonText:'确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        resetAdPassword(user.ber_id).then(res=>{
          if(res.data.status==200){
            return this.$message.success(`${user.ber_uname}用户的密码重置成功！`);
          }
          else{
            return this.$message.error(`${user.ber_uname}用户的密码重置失败！`);
          }
        })
      }).catch(()=>{
        return this.$message('已取消重置密码！');
      })
    },
    resetForm(formName){    //重置查询表单
      this.$refs[formName].resetFields();
      this.getUsersFromServe();
    },
    onSubmit(){ //查询
      this.getUsersFromServe();
    },
    handleSizeChange(val){  //每页条数变化
      this.pageSize =val;
      this.getTableData();
    },
    handleCurrentChange(val){  //当前页发生改变
      this.currentPage = val;
      this.getTableData();
    },
    getTableData(){  //获取数据
      let startIndex = (this.currentPage-1)*this.pageSize;
      let endIndex = startIndex+this.pageSize > this.tableData.length ? this.tableData.length : startIndex+this.pageSize;
      this.showTableData = this.tableData.slice(startIndex,endIndex);
    }
  }
}
</script>

<style scoped>
.search{
  border: 1px solid #999999;
  border-radius: 3px;
  margin-bottom: 10px;
}
.title{
  color: white;
  background-color: rgb(55,75,118);
  font-size: 12px;
  height: 25px;
  line-height: 25px;
  padding-left:8px;
  margin-bottom: 10px;
}
</style>
